<template>
  <div class="page-login">
      <h3 class="title">系统登录</h3>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="username">
            <el-input  v-model="form.username" size="small" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="form.password" size="small" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="margin-0">
            <el-checkbox v-model="form.checked">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item class="margin-0">
            <el-button type="primary" size="small" style="width:100%;" @click="submit('form')">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
    import config from '../config.js';
    import api from '../api'
    export default {
        methods:{
            submit(formName){
                let tath=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        api.$http("/system/login",this.form,function(err,res){
                            console.log(res.data);
                            if(parseInt(res.data.code)==1){
                               this.console(res.data.msg);
                                setTimeout(function(){
                                    this.$router.push({path:"/system/index"});
                                }.bind(this),500);
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        }.bind(this),function(err){
                            this.$message.error("出错了");
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            console(text,type){
                this.$message({
                    message: text,
                    type: type||'success'
                });
            },
            getLogin(){
                api.$http('/system/getLogin',{},function(err,res){
                    console.log(res.data);
                    if(res.data.code==1){
                        this.$router.push({path:"/system/index"});
                    }
                }.bind(this));
            }
        },
        mounted(){
            this.getLogin();
        },
        data(){
            return {
                logintype:false,
                form:{
                    username:'',
                    password:'',
                    checked:true
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>
<style scope>
*{
    font-weight:300
}
.page-login{
    width:320px;
    height:252px;
    padding:20px 40px;
    border:1px solid #ccc;
    border-radius:10px;
    position: fixed;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-146px;
}
.margin-0{
    margin:0;
}
.title{
    margin: 0;
    margin-bottom: 20px;
    text-decoration: none;
    font-weight: 300;
    text-align: center;
}
</style>
